<template>
  <div>
    <div class="topbar">
      <!--返回按钮，输入框，城市选择-->
      <div class="back">
        <a href="javascript:;" class="fa fa-angle-left"></a>
      </div>
      <div class="from">
        <div class="content">
          <span class="fa fa-search search"></span>
          <span class="font">请输入城市/景点/游玩主题</span>
        </div>
      </div>
      <router-link class="xz" to="/city" tag="div">
        {{this.$store.state.city}}
        <span class="fa fa-caret-down"></span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header"
};
</script>
<style lang="less" scoped>
//设计高尺寸 : 这里是750px
@psdWidth: 750px;
//预设基准值
@baseFontSize: 100px;
.topbar {
  display: flex;
  height: 44rem / @baseFontSize;
  background: #00afcf;
  justify-content: space-between;
  font-size: 13rem / @baseFontSize;
  .back {
    width: 40rem / @baseFontSize;
    height: 100%;
    text-align: center;
    a {
      font-size: 30rem / @baseFontSize;
      color: #fff;
      font-weight: normal;
      line-height: 40rem / @baseFontSize;
    }
  }
  .from {
    flex: 1;
    .content {
      background: #fff;
      height: 30rem / @baseFontSize;
      margin-top: 7px;
      border-radius: 5px;
      border: none;
      color: #ccc;
      padding-left: 10px;
      span {
        line-height: 28rem / @baseFontSize;
      }
      .search {
        font-size: 15rem / @baseFontSize;
      }
    }
  }
  .xz {
    width: 64rem / @baseFontSize;
    height: 100%;
    float: right;
    text-align: center;
    color: #fff;
    line-height: 44rem / @baseFontSize;
  }
}
</style>
